@withdrawalWith: 40PX;
@businessWith: 100PX;

.mine-arrow-img {
  width: 10Px;
  height: 18Px;
  padding-right: 15Px;
}

.opacity-box {
  background-color: #FFFFFF;
  box-shadow: 0 0 6px 0 rgba(204, 204, 204, 0.50);
  opacity: 0.7;
  border-radius: 10px;
  position: absolute;
  z-index: 999;
}

.template-img {
  width: 36Px;
  height: 25Px;
  padding-left: 15Px;
}

.template-title {
  font-size: 14Px;
  color: #333333;
  padding-left: 10Px;
}

.template-arrow {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-end
}

.mine-index {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .mine-head {
    height: 140PX;
    background-image: url('../../assets/img/bj.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .head-info-con {
      margin: 30PX 24PX 33PX 21PX;
      width: 90%;
      display: flex;
      flex-direction: row;
      align-items: flex-start;

      .mine-info {
        flex-grow: 1;
        margin-left: 20PX;
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: baseline;

        .user-name {
          font-size: 25PX;
          color: #FFFFFF;
        }

        .phone-editor-con {
          width: 100%;
          display: flex;
          margin-top: 20PX;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          .user-phone {
            flex-grow: 1;
            font-size: 14Px;
            color: #FFFFFF;
            font-weight: 100;
          }
        }
      }
    }


    .mine-name-con {
      margin-top: 8PX;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .user-name {
        font-size: 16PX;
        color: #FFFFFF;
      }

      .user-phone {
        font-size: 12px;
        color: #FFFFFF;
      }
    }

    .user-money {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: 90%;
      height: 100PX;
      top: 155PX;
      .opacity-box();
      display: flex;
      flex-direction: column;

      .user-total-money {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 10PX;
      }

      .user-total-money-info {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .money-info-title {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin-top: 5PX;
      }

      .user-balance {
        margin-top: 5PX;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;

        .available-balance {
          width: 50%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .freeze-balance {
          width: 50%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .user-withdrawal {
      width: 90%;
      height: 48Px;
      top: 270PX;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      .opacity-box();
      display: flex;
      flex-direction: row;
      align-items: center;

      .withdrawal-img {
        .template-img();
      }

      .withdrawal-title {
        width: @withdrawalWith;
        .template-title();
      }

      .withdrawal-arrow {
        .template-arrow();
      }
    }

    .user-busniess {
      width: 90%;
      height: 48Px;
      top: 335PX;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      .opacity-box();
      display: flex;
      flex-direction: row;
      align-items: center;

      .busniess-img {
        .template-img();
      }

      .busniess-title {
        width: @businessWith;
        .template-title();
      }

      .busniess-arrow {
        .template-arrow();
      }
    }

    .logout-btn {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      top: 500PX;
      width: 90%
    }

    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {

      /* Styles */
      .logout-btn {
        position: absolute;
        top: 410Px;
        width: 90%
      }

    }

    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2) {

      /* Styles */
      .logout-btn {
        position: absolute;
        top: 450Px;
        width: 90%
      }
    }
  }

}
